<template>
  <div
    data-h-cxk-qnews
    class="container-news-quick"
  >
    <div
      data-h-cxk-qnews
      class="head-news"
    >
      <h4
        data-h-cxk-qnews
        class="news-title"
      >热门资讯</h4>
      <ul
        data-h-cxk-qnews
        class="news-list"
      >
        <li
          data-h-cxk-qnews
          class="li-first"
        >
          <img
            data-h-cxk-qnews
            :src="firstnews.img_url"
            alt=""
          >
          <p data-h-cxk-qnews>
            <a
              data-h-cxk-qnews
              href=""
              @click="goinfo(firstnews.hotid)"
            >
              {{firstnews.title}}
            </a>
          </p>
        </li>
        <li
          data-h-cxk-qnews
          v-for="(item, index) in news"
          :key="index"
        >
          <i data-h-cxk-qnews>{{index+2}}</i>
          <a
            href=""
            data-h-cxk-qnews
            @click="goinfo(item.hotid)"
          >
            {{item.title}}
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      news: [],
      firstnews: "",
    };
  },
  created() {
    this.getnews();
  },
  methods: {
    async getnews() {
      let {
        data: { message },
      } = await this.Api.hotspot.getnews();
      for (var i = 0; i < message.length - 1; i++) {
        for (var j = 0; j < message.length - 1 - i; j++) {
          if (message[j + 1].hotid > message[j].hotid) {
            var temp = message[j + 1];
            message[j + 1] = message[j];
            message[j] = temp;
          }
        }
      }
      console.log(message);
      console.log("ok");
      this.news = message;
      this.firstnews = this.news.splice(0, 1)[0];
    },
    goinfo(id) {
      this.$router.push(`/hotspot/news/${id}`);
    },
  },
};
</script>

<style lang="less" >
.container-news-quick[data-h-cxk-qnews] {
  width: 360px;
  height: 484px;
  margin-left: 100px;
  float: left;
  background-color: rgb(255, 255, 255);
  .head-news[data-h-cxk-qnews] {
    margin-bottom: 20px;
    color: #ef4238;
    h4[data-h-cxk-qnews] {
      margin-top: 0px;
    }
    .news-title[data-h-cxk-qnews] {
      font-size: 26px;
      font-weight: 400;
      font-family: "Microsoft";
      line-height: 26px;
    }
  }
  .news-list[data-h-cxk-qnews] {
    // margin-top: -10px;
    width: 360px;
    height: 438px;
    padding: 0px;
    color: #333;
    li[data-h-cxk-qnews] {
      list-style: none;
      width: 360px;
      padding: 10px;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      i[data-h-cxk-qnews] {
        margin-right: 10px;
        color: orangered;
      }
      a[data-h-cxk-qnews] {
        text-decoration: none;
        font-size: 14px;
        color: inherit;
      }
    }
    li:hover[data-h-cxk-qnews] {
      color: #ef4238;
    }
    .li-first[data-h-cxk-qnews] {
      height: 68px;
      // margin-bottom: 10px;
      padding: 0px;
      margin-left: 10px;
      img[data-h-cxk-qnews] {
        width: 120px;
        height: 72px;
      }
      p[data-h-cxk-qnews] {
        width: 224px;
        float: right;
        white-space: normal;
      }
    }
  }
}
</style>